<template>
    <!-- 任务管理页面的内容 -->
    <view>
        <!-- 任务管理相关的列表、搜索框等 -->
        <view class="task-option-list">
            <button class="task-option" v-for="(item, index) in taskOptions" :key="index" @click="handleTaskOptionClick(item, index)">
                {{ item }}
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 任务管理页面的数据
            taskOptions: ['群聊', '漂流瓶'],
            // 假设对应的页面路径，你需要根据实际情况修改
            pagePaths: [
                '/pages/userTalkAll/userTalkAll',
                '/pages/userBottle/userBottle'
            ]
        };
    },
    onLoad() {
        // 任务管理页面的初始化逻辑
    },
    methods: {
        // 任务管理页面的方法
        handleTaskOptionClick(option, index) {
            console.log(`点击了${option}`);
            // 在这里添加点击不同选项后的具体业务逻辑，跳转到对应页面
            uni.navigateTo({
                url: this.pagePaths[index]
            });
        }
    }
};
</script>

<style>
/* 任务管理页面的样式 */
.task-option-list {
    display: flex;
    flex-direction: column;
}
.task-option {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    cursor: pointer;
    background-color: blue; /* 设置按钮背景颜色为白色 */
	color: white;
    border-radius: 5px; /* 设置按钮圆角 */
}
</style>